<template>
  <div class="articleList back-white">
    <el-container>
      <el-main>
        <el-form label-width="80px">
          <el-form-item label="分类名称"><el-input v-model="title"></el-input></el-form-item>
          <el-form-item><el-button type="primary" @click="getData">查询</el-button></el-form-item>
          <el-button type="primary" class="fr" @click="toEdit">新增分类</el-button>
        </el-form>
        <div class="x-item x-item-none back-white">
            <el-table border :data="list">
              <el-table-column label="id" prop="tab_id" width="80px"></el-table-column>
              <el-table-column label="分类标题" prop="title"></el-table-column>
              <el-table-column label="查看权限" prop="is_rec" width="230px">
                <template slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.level_one == 1">游客登录</el-tag>
                    <el-tag size="small"  type="warning"  v-if="scope.row.level_two == 1">初级会员</el-tag>
                  <el-tag size="small" type="danger"  v-if="scope.row.level_three == 1">高级会员</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="发布时间" prop="create_time"></el-table-column>
              <el-table-column label="排序" prop="weight"></el-table-column>
              <el-table-column label="包含文章数量" prop="article.length"></el-table-column>
              <el-table-column label="操作" prop="status">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="userDelete(scope.row.tab_id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          <div class="pdtb075 tc">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="pageChange"
              :total="pageCount">
            </el-pagination>
          </div>
          </div>
      </el-main>
    </el-container>
  </div>
</template>
<script type="text/ecmascript-6">
  import {getDateList,createData} from '../../api/api';
  export default {
    data(){
      return {
        title: '', //文章标题
        list: [], //用户列表
        pageCount: 0, //总数
        curPage:1 //当前页数
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){ //获取文章列表数据
        let o = {
          "model": "Tabs",
          "limit":10,
          "offset": this.curPage - 1,
          "orderBy":"create_time desc",
          "with":{
            "0":"article"
          },
          "condition":{
            "type":5
          },
          "search":{}
        };
        if(this.title){
          o.search.title = this.title;
        }
        getDateList(o).then((data) => {
          this.list = data.data.data.data;
          this.pageCount = data.data.data.count - 0;
        })
      },
      pageChange(e){
        this.curPage = e;
        this.getData();
      },
      toEdit(row){ //新增或编辑文章
        let url = '/mclassEdit';
        if(row.tab_id){
          url += '?id=' + row.tab_id;
        }
        this.$router.push(url);
      },
      userDelete(id){ //用户删除操作
        this.$confirm('要删除这篇文章吗?','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.delFn(id);
        });
      },
      delFn(id){ //删除请求
        let o =  {
          "model": "Tabs",
          "data": {
            "is_delete": "1"
          },
          "update_condition":{
            "tab_id":id
          }
        };
        createData(o).then((data) => {
          if(data.data.code == 200){
            this.applySwitch = false;
            this.getData();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        })
      }
    }
  }
</script>
<style>
  .articleList .el-form-item{
    width: 260px;
    display: inline-block;
  }
</style>
